<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Application</title>

  <!--stylesheet-->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
  <!--header section start-->
  <header class="header">
    <div class="container">
      <div class="header__wrapper">
        <div class="header__logo">
          <a href="index.html">
            <img src="assets/images/logo.png" alt="logo">
          </a>
        </div>
        <div class="header__nav">
          <ul class="header__nav-primary">
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Download</a></li>
          </ul>
          <span><i class="fas fa-times"></i></span>
        </div>
        <div class="header__bars">
          <div class="header__bars-bar header__bars-bar-1"></div>
          <div class="header__bars-bar header__bars-bar-2"></div>
          <div class="header__bars-bar header__bars-bar-3"></div>
        </div>
      </div>
    </div>
  </header>
  <!--header section end-->

  <!--hero start-->
  <section class="hero">
    <div class="hero__wrapper">
      <div class="container">
        <div class="row">
          <div class="hero__info">
            <h1>daily fitness regime<span class="dot">.</span></h1>
            <p class="paragraph">Landder+ is a free all-day activity tracker that inspires you to be more active and
              helps you to move at
              least 30 minutes every day.</p>
            <div class="hero__info__buttons">
              <a href="#" class="hero__info__button"><span>Download for iPhone</span></a>
              <a href="#" class="hero__info__button"><span>Download for Android</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="arrows__wrapper">
      <div class="hero__arrows arrows" id="arrows-1">
        <div class="arrows__arrow arrows__arrow-1" data-depth="0.1"></div>
        <div class="arrows__arrow arrows__arrow-2" data-depth="0.2"></div>
        <div class="arrows__arrow arrows__arrow-3" data-depth="0.3"></div>
        <div class="arrows__arrow arrows__arrow-4" data-depth="0.1"></div>
        <div class="arrows__arrow arrows__arrow-5" data-depth="0.1"></div>
        <div class="arrows__arrow arrows__arrow-6" data-depth="0.3"></div>
      </div>
    </div>
  </section>
  <!--hero end-->

  <!--compare start-->
  <section class="compare">
    <div class="compare__wrapper">
      <div class="compare__info--wrapper">
        <div class="container">
          <div class="compare__info">
            <div class="section-header">
              <h2 class="h2-heading light">compare with friends<span class="dot">.</span></h2>
              <p class="paragraph light">Landder+ helps you get a sense of how much you move everyday
                and compare your activity levels with people like you. </p>.
            </div>
            <div class="compare__info__img">
              <img src="assets/images/compare_phone.png" alt="image">
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="compare__single--wrapper">
          <div class="compare__single">
            <img src="assets/images/compare_icon_01.png" alt="icon">
            <h3 class="h3-heading">Connect with friends</h3>
            <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony urna
              suscipit is mattis
              adipiscing
              elit aecenas.</p>
          </div>
          <div class="compare__single">
            <img src="assets/images/compare_icon_02.png" alt="icon">
            <h3 class="h3-heading">Daily Fitness Reports</h3>
            <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony urna
              suscipit is mattis
              adipiscing
              elit aecenas.</p>
          </div>
          <div class="compare__single">
            <img src="assets/images/compare_icon_03.png" alt="icon">
            <h3 class="h3-heading">Monitor Your Health</h3>
            <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony urna
              suscipit is mattis
              adipiscing
              elit aecenas.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--compare end-->

  <!--testimonial start-->
  <section class="testimonial">
    <div class="testimonial__wrapper">
      <div class="container">
        <div class="section-header">
          <h2 class="h2-heading light">why people love us<span class="dot">.</span></h2>
          <p class="paragraph light">Landder+ helps you get a sense of how much you move everyday
            and compare your activity levels with people like you. </p>.
        </div>
        <div class="swiper-container testimonial__swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide testimonial__swiper-slide">
              <img src="assets/images/testimonial_img_01.png" alt="testimonial-icon">
              <h3 class="h3-heading">James Bright</h3>
              <ul class="rating">
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
              </ul>
              <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony urna
                suscipit is mattis adipiscing elit aecenas.</p>
            </div>
            <div class="swiper-slide testimonial__swiper-slide">
              <img src="assets/images/testimonial_img_02.png" alt="testimonial-icon">
              <h3 class="h3-heading">Nicole Kidman</h3>
              <ul class="rating">
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
              </ul>
              <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony urna
                suscipit is mattis adipiscing elit aecenas.</p>
            </div>
            <div class="swiper-slide testimonial__swiper-slide">
              <img src="assets/images/testimonial_img_03.png" alt="testimonial-icon">
              <h3 class="h3-heading">Michael King</h3>
              <ul class="rating">
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
                <li><i class="fas fa-star"></i></li>
              </ul>
              <p class="paragraph small dark">Lorem ipsum dolor met cctetur adipiscing elit aecenas eumod est nony urna
                suscipit is mattis adipiscing elit aecenas.</p>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="arrows__wrapper">
      <div class="hero__arrows arrows" id="arrows-2">
        <div class="arrows__arrow arrows__arrow-1" data-depth="0.1"></div>
        <div class="arrows__arrow arrows__arrow-2" data-depth="0.2"></div>
        <div class="arrows__arrow arrows__arrow-3" data-depth="0.3"></div>
        <div class="arrows__arrow arrows__arrow-4" data-depth="0.1"></div>
        <div class="arrows__arrow arrows__arrow-5" data-depth="0.1"></div>
        <div class="arrows__arrow arrows__arrow-6" data-depth="0.3"></div>
      </div>
    </div>
  </section>
  <!--testimonial end-->

  <!--compare start-->
  <section class="compare second_count">
    <div class="compare__wrapper">
      <div class="compare__info--wrapper">
        <div class="container">
          <div class="compare__info">
            <div class="section-header">
              <h2 class="h2-heading light">every second counts<span class="dot">.</span></h2>
              <p class="paragraph light">Landder+ helps you get a sense of how much you move everyday
                and compare your activity levels with people like you. </p>.
            </div>
            <div class="compare__info__img">
              <img src="assets/images/compare_phone.png" alt="image">
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="compare__single--wrapper">
          <div class="hero__info">
            <h1>let’s go new places<span class="dot">.</span></h1>
            <p class="paragraph">Landder+ helps you get a sense of how much you move everyday
              and compare your activity levels with people like you.</p>
            <div class="hero__info__buttons">
              <a href="#" class="hero__info__button"><span>Download for iPhone</span></a>
              <a href="#" class="hero__info__button"><span>Download for Android</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--compare end-->

  <!--footer start-->
  <footer class="footer">
    <div class="footer__wrapper">
      <div class="container">
        <div class="footer__inner">
          <div class="footer__nav">
            <ul class="footer__nav--primary">
              <li><a href="index.html">home</a></li>
              <li><a href="#">appstore</a></li>
              <li><a href="#">playstore</a></li>
              <li><a href="#">blog</a></li>
              <li><a href="#">support</a></li>
              <li><a href="#">about us</a></li>
              <li><a href="#">press</a></li>
            </ul>
            <ul class="footer__nav--social">
              <li><a href="#"><i class="fab fa-youtube"></i></a></li>
              <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
              <li><a href="#"><i class="fab fa-twitter"></i></a></li>
              <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
              <li><a href="#"><i class="fab fa-github"></i></a></li>
              <li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>
            </ul>
          </div>
          <div class="footer__subscribe">
            <h5 class="h5-heading">subscribe</h5>
            <div class="footer__subscribe--input">
              <input type="text" placeholder="Your email address">
              <i class="fas fa-long-arrow-alt-right"></i>
            </div>
          </div>
        </div>
        <div class="footer__copy">
          <h6>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></h6>
        </div>
      </div>
    </div>
  </footer>
  <!--footer end-->

  <script src="js/jquery-3.4.1.min.js"></script>
  <script>
    $(window).on('load', function () {
      $("body").addClass("loaded");
    });
  </script>
  <script src="js/swiper-bundle.min.js"></script>
  <script src="js/parallax.min.js"></script>
  <script src="assets/js/script.js"></script>
</body>

</html>